<template>
  <el-dialog
    v-dialogDrag
    :title="title"
    :visible.sync="dialogVisible"
    class="dialogStyleMiddle"
    :before-close="handleClose"
    :close-on-click-modal="false"
    append-to-body
  >
    <div>
      <!--搜所表单-->
      <el-form v-if="dialogVisible" ref="form" :model="filters" label-width="80px" class="dialog-form">
        <el-row>
          <el-col :span="10" class="formHeight">
            <el-form-item label="项目名称" prop="personName">
              <label slot="label">项目名称</label>
              <el-input v-model="filters.personName" placeholder="请输入项目名称" clearable size="small" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <!--操作按钮-->
      <el-row :gutter="10" class="button-wrap">
        <el-col :span="1.5">
          <el-button v-clickForbidden icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button v-clickForbidden icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        </el-col>
      </el-row>
      <!--列表-->
      <el-table
        ref="multipleTable"
        :data="tableData"
        :default-expand-all="true"
        row-key="id"
        :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
        class="table-list"
        max-height="310"
        :row-style="rowClass"
        size="mini"
        @selection-change="handleSelectionChange"
        @row-click="rowChecked"
      >
        <el-table-column type="selection" width="38" align="center" />
        <el-table-column type="index" label="序号" width="51" align="center" />
        <el-table-column
          prop="proName"
          label="项目名称"
          min-width="180"
          align="left"
          header-align="center"
          :show-overflow-tooltip="true"
        >
          <template slot-scope="scope">
            <router-link :to="{path:'/project/project-detail',query:{id:scope.row.id} }" class="link-type">
              <span>{{ scope.row.proName }}</span>
            </router-link>
          </template>
        </el-table-column>
        <el-table-column
          prop="proNum"
          label="项目编号"
          min-width="120"
          align="center"
          :show-overflow-tooltip="true"
        >
          <template slot-scope="scope">
            <router-link :to="{path:'/project/project-detail',query:{id:scope.row.id} }" class="link-type">
              <span>{{ scope.row.proNum }}</span>
            </router-link>
          </template>
        </el-table-column>

        <el-table-column
          label="合同数"
          align="center"
          width="120 "
          prop="contractCount"
        />
        <el-table-column
          label="合同单价"
          align="center"
          width="120 "
          prop="contractPriceDecimal"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          label="项目工期(天)"
          align="center"
          width="150 "
          prop="proDuration"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          label="钻孔总数"
          align="center"
          width="120 "
          prop="drillingCount"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          label="项目状态"
          min-width="80 "
          align="center"
          prop="status"
        >
          <template slot-scope="{row}">
            <span v-if="scope.row.status === ''">-</span>
            <span v-else>{{ scope.row.status | ProStatus }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="计划开始时间"
          align="center"
          width="140 "
          prop="startTime"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          label="计划结束时间"
          align="center"
          width="140 "
          prop="endTime"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          prop="createTime"
          label="创建时间"
          min-width="150"
          :show-overflow-tooltip="true"
          align="center"
        />
      </el-table>
      <!-- 分页-->
      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="filters.pageNum"
        :limit.sync="filters.pageSize"
        :page-sizes="[8,15,20,50,100]"
        :page-count="filters.pageCount"
        @pagination="getList"
      />
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button size="medium" @click="handleClose">取 消</el-button>
      <el-button type="primary" size="medium" @click="submitForm">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
// 引入人员列表
// import { listPersonal } from '@/api/basicInfo/personal/allPersonal'
import { mapState } from 'vuex'
export default {
  components: {},
  data() {
    return {
      title: '', // 弹框标题
      dialogVisible: false, // 弹框标识
      // 搜索框 start
      filters: { // form数据
        pageNum: 1,
        pageSize: 8,
        pageCount: 5,
        personName: '',
        personType: ''
      },
      // 表格数据 start
      total: 0, // 分页总页数
      tableData: [], // 表格数据
      multipleSelection: [], // 多选框选中数组
      selectRow: [], // 高亮数组
      getRowKeys(row) { // 分页记录功能
        return row.id
      },
      // 人员选中start
      personIds: [], // 被选中人员id数组
      personNames: [], // 被选中人员名字数组
      echoIds: [], // 用于存储分页回显的数据
      choice: '多选', // 单选,多选
      ids: [],
      echoList: []
    }
  },
  computed: {
    ...mapState({
      personType: state => state.basicInfo.personType // 人员类型
    })
  },
  methods: {
    // 回显人员类型
    setPersonalType(row) {
      return this.selectDictLabel(this.personType, row.personType)
    },
    // 从父组件获取参数的方法
    handleAdd(title, checkStatus, personType, echoIds, echoList) {
      this.dialogVisible = true
      this.filters.personType = personType
      this.title = title
      this.selectRow = []
      this.handleChoice(checkStatus)
      if (echoIds instanceof Array) {
        this.echoIds = echoIds
      } else if (echoIds != null && echoIds !== '') {
        this.echoIds = echoIds.split(',')
      } else {
        this.echoIds = null
      }
      this.echoList = echoList
      // 用于存储被选中的人员id数组
      this.personIds = []
      this.personNames = []
      this.getList()
    },
    // 表格start
    // 获取人员列表
    getList() {
      setTimeout(() => {
        this.tableData = [
          {
            id: 1,
            proName: '铁路轨道测绘',
            orgName: '河北省中铁十九局',
            address: '石家庄市裕华区万达广场',
            scale: '1',
            level: '乙级',
            status: '',
            proNum: '1101060122015YT',
            contractCount: '10',
            createTime: '2021-04-01',
            contractPriceDecimal: '5000.1',
            endTime: '2021-05-01',
            startTime: '2021-06-01',
            proDuration: '30',
            drillingCount: '106',
            children: [
              {
                id: 1001,
                level: '甲级',
                status: '0', // 项目状态
                proCode: '2021-000052-83-01-0000063', // 项目代码
                proNum: '1101060812019905', // 项目编号
                proName: '石家庄联络处新址改扩建房屋加固工程', // 项目名称
                province: '石家庄裕华区', // 所在区域
                address: '石家庄裕华区塔南路228号', // 项目地址
                typeName: '平原',
                x: '116.397128', // 坐标经度
                y: '39.916527', // 坐标经度
                z: '405', // 坐标经度
                contractCount: '10',
                contractAmountdecimal: '5001.6',
                contractPriceDecimal: '5000.1',
                drillMember: '5021.36',
                drillingCount: '106',
                remark: '暂无',
                projectPersonalName: '张三',
                createTime: '2021-04-09',
                endTime: '2021-05-01',
                startTime: '2021-06-01',
                proDuration: '30'
              }
            ]
          }
        ]
        this.total = 1
        this.addTaleData()
      }, 300)
      // if (this.multipleSelection.length) {
      //   this.echoIds = this.multipleSelection.map(item => {
      //     return item.personId
      //   })
      // }
      // listPersonal(this.changeDateRange(this.filters, this.dateRange)).then(res => {
      //   if (res) {
      //     this.tableData = res.data.rows
      //     this.total = res.data.total
      //     this.$nextTick(() => {
      //       this.rowMultipleChecked()
      //     })
      //   }
      // })
    },
    /**
       * 用于数据回显
       * echoIds 用于单个回显
       */
    rowMultipleChecked() {
      if (this.echoIds != null) {
        this.tableData.forEach((item, i) => {
          this.echoIds.forEach((multItem, j) => {
            if (this.tableData[i].personId === this.echoIds[j]) {
              this.$refs.multipleTable.toggleRowSelection(this.tableData[i], true) // 这步操作是让  页面显示选中的数据
            }
          })
        })
      } else {
        this.$refs.multipleTable.clearSelection()
      }
    },
    // 关闭弹框
    handleClose() {
      this.dialogVisible = false
      this.$refs.multipleTable.clearSelection()
      this.emptyForm()
    },
    // 搜索方法
    handleQuery() {
      this.filters.pageNum = 1
      this.getList()
    },
    emptyForm() {
      this.resetForm('form')
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.emptyForm()
      this.handleQuery()
      this.echoIds = null
    },
    /** 清空按钮操作 */
    resetEmpty() {
      this.emptyForm()
      this.handleQuery()
    },
    // 控制表格选框多选单选
    handleChoice(checkStatus) {
      if (checkStatus === '0') {
        this.choice = '单选'
      } else {
        this.choice = '多选'
      }
    },
    // 多选框选中事件
    handleSelectionChange(val) {
      this.multipleSelection = val
      // 单选
      if (this.choice === '单选') {
        if (val.length > 1) {
          this.$refs.multipleTable.clearSelection()
          this.$refs.multipleTable.toggleRowSelection(val.pop())
        }
      }
      // 高亮
      this.selectRow = []
      if (this.multipleSelection.length > 0) {
        this.multipleSelection.forEach((item, index) => {
          this.selectRow.push(this.tableData.indexOf(item))
        })
      }
      this.checkIds()
    },
    // 高亮样式
    rowClass({
      row,
      rowIndex
    }) {
      if (this.selectRow.includes(rowIndex)) {
        return {
          'background-color': 'rgba(185,221,249,.75)'
        }
      }
    },
    // 获取选中的行数并且把值返回到父节点（roleDataScopeDet）
    checkIds() {
      this.personIds = this.multipleSelection.map(item => {
        return item.personId
      })
      this.personNames = this.multipleSelection.map(item => {
        return item.personName
      })
    },
    // 点击行时,选框选中
    rowChecked(row) {
      this.$refs.multipleTable.toggleRowSelection(row)
    },
    // 确定按钮
    submitForm() {
      // 调用向父组件传值的方法
      this.checkIds()
      this.dialogVisible = false
      this.$emit('fatherMethod', this.personIds, this.multipleSelection, this.personNames)
      this.$refs.multipleTable.clearSelection()
    }
  }
}

</script>

<style>
</style>
